<template>
  <div class="economic-action-point">
    <a-popover placement="bottom" overlayClassName="economic-action-popover">
      <template slot="content">
        <ul class="economic-action-point-uls ">
          <!-- <li class="triangle"></li> -->
          <slot />
        </ul>
      </template>
      <div>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </a-popover>
  </div>
</template>

<script>
export default {};
</script>
<style lang="scss">
.economic-action-point {
  display: inline-block;
  & > div {
    height: 18px;
    margin-left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    span {
      width: 4px;
      height: 4px;
      background: var(--primary);
      border-radius: 50%;
      margin-right: 4px;
    }
  }
}
.economic-action-eli {
  background: #e8e8e8 !important;
  opacity: 0.6;
  &:hover {
    background: #e8e8e8;
  }
}
.economic-action-point-uls {
  margin: 0;
  padding: 0;
  li {
    width: 80px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    // z-index: 9;
    font-size: 12px;
    cursor: pointer;
    &:hover {
      // z-index: 9;
      color: var(--primary);
      background: var(--primary10);
      a {
        color: var(--primary) !important;
      }
    }
  }
}
.economic-action-popover {
  // width: 100px;
  .ant-popover-inner-content {
    padding: 0;
  }
}
</style>
